<template>
  <div id="app">
    <router-view v-slot="{ Component, route }">
      <transition name="fade" mode="out-in" appear>
        <div class="page-wrapper">
          <keep-alive :include="cacheInclude">
            <component :is="Component" :key="route.name || route.fullPath" />
          </keep-alive>
        </div>
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

// 动态 include 列表，用于按需清理 KeepAlive 缓存
const cacheInclude = ref(['ContractAdd','ExpenseAdd','ContractAddPay'])

// 监听页面发出的清理事件，移除对应组件的缓存，再立即恢复 include 列表
const handleClearCache = (e: CustomEvent) => {
  const name = (e as any)?.detail?.name
  if (!name) return
  const idx = cacheInclude.value.indexOf(name)
  if (idx !== -1) {
    // 从 include 移除以触发缓存淘汰
    cacheInclude.value.splice(idx, 1)
    // 下一个 tick 恢复 include，保证后续还能被缓存
    setTimeout(() => {
      if (!cacheInclude.value.includes(name)) {
        cacheInclude.value.push(name)
      }
    }, 0)
  }
}

onMounted(() => {
  window.addEventListener('clear-keepalive-cache', handleClearCache as EventListener)
})

onBeforeUnmount(() => {
  window.removeEventListener('clear-keepalive-cache', handleClearCache as EventListener)
})
</script>

<style>
body {
  /* font-size: 16px; */
  background-color: #f8f8f8;
  -webkit-font-smoothing: antialiased;
}

/* 禁用双击放大和触摸缩放 */
* {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 允许输入框和文本区域选择文本 */
input, textarea, [contenteditable] {
  -webkit-user-select: auto;
  -khtml-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* 禁用双击选择文本 */
body {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 页面切换动画 - 消除空白闪烁 */
.fade-enter-active {
  transition: opacity 0.08s ease-out;
}

.fade-leave-active {
  transition: opacity 0.05s ease-in;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.fade-enter-from {
  opacity: 0;
}

.fade-leave-to {
  opacity: 0;
}

/* 确保页面正常显示 */
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

/* 防止页面闪烁的基础样式 */
#app {
  min-height: 100vh;
  background-color: #f8f8f8;
  position: relative;
}

/* 确保router-view内容正确显示 */
.router-view-container {
  width: 100%;
  min-height: 100vh;
}

/* 页面包装器样式 - 优化切换体验 */
.page-wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative;
  background-color: #f8f8f8;
}

/* 确保切换时的层级和定位 */
.fade-enter-active .page-wrapper {
  z-index: 2;
}

.fade-leave-active .page-wrapper {
  z-index: 1;
}

/* 优化加载状态的显示 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  background-color: transparent;
}

/* === Vant ImagePreview 全屏兜底修复（统一新增页的预览效果）=== */
/* 强制弹层和滑动容器占满视口，避免在某些页面样式影响下宽度被压缩为很小值（如 27px） */
.van-popup.van-image-preview {
  width: 100vw !important;
  height: 100vh !important;
  background: transparent;
}
.van-image-preview__swipe {
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}
.van-image-preview__swipe .van-swipe-item {
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}
/* 居中容器，避免图片在左上角 */
.van-image-preview__image {
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* 图片按 contain 适配，居中显示，避免拉伸或超出 */
.van-image-preview__image .van-image__img {
  max-width: 100vw !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  object-position: center center !important;
}
/* 预览索引“1/1”居中显示 */
.van-image-preview__index {
  position: fixed !important;

  left: 50% !important;
  transform: translate(0, -50%) !important;
  width: auto !important;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  color: #fff !important;
  font-size: 24px !important;
  line-height: 1 !important;
  z-index: 2005 !important; /* 高于 overlay 与弹层 */
  pointer-events: none !important;
}
</style>
